<template>
  <div>
    <el-card class="box-card  loginCl">
      <div slot="header" class="clearfix">
        <h3 style="align-content: center;text-align: center">上传头像</h3>
      </div>
      <div class="text item">
        <!-- 上传头像 -->
        <el-upload style="align-content: center;text-align: center;margin-bottom: 20px"
                   action=""
                   list-type="picture-card"
                   :auto-upload="true"
                   :on-success="uploadSuccess"
                   :http-request="updatePhoto">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt=""
            >
            <span class="el-upload-list__item-actions">
      </span>
          </div>
        </el-upload>
      </div>
    </el-card>
      </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "head",
  data(){
    return {
      role:'/3'
    }
  },
  methods: {
    uploadSuccess(response, file, fileList) {
      console.log(response)
      this.$store.state.headphoto = response
      console.log(file)
      console.log(fileList)
    },
    updatePhoto(f){
      let fd = new FormData
      fd.append("username",this.$store.state.username)
      fd.append("headFile",f.file)
      this.$axios.post('api/user/updatehead'+this.role,fd).then(r=>{
        if (r.data != null&& r.data!="null"){
          this.$message.success("修改成功")
          this.$store.state.headphotor=r.data
        }else{
          this.$message.warning("修改失败")
        }
      })
    }
  }
}
</script>

<style scoped>
.loginCl{
  margin:10% 20% 50% 20%;
  width:40%
}
.row-class{
  margin-right: 15%;
  margin-left: 10%;
}
</style>